import useDimensions from 'hooks/useDimensions';
import {useEffect, useMemo, useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
  getListUavOnline,
  getListAllVideos,
  getHighMonitorsTree,
  getRadiusHighMonitors,
} from 'api/police';
import {SplitScreen} from 'enums/police';
import VideoPlayer from 'components/BaseVideo';
const List = [
  {
    title: '高点监控',
  },
  {
    title: '无人机',
  },
  {
    title: '作战记录仪',
  },
  {
    title: '布控球',
  },
];
interface defineProps {
  id: number | string;
}
export default (props: defineProps) => {
  const [inactive, setInactive] = useState(0);
  const hp = useDimensions();
  const [playList, setPlayList] = useState<Record<string, any>>([]);
  const styles = StyleSheet.create({
    active: {
      borderRadius: 8,
      width: 112 * hp,
      height: 48 * hp,
      textAlign: 'center',
      lineHeight: 48 * hp,
      fontSize: 18 * hp,
      marginTop: 16,
      color: 'rgba(0,0,0,0.6)',
    },
    inactive: {
      backgroundColor: 'rgba(10,89,247,0.06)',
      color: '#0A59F7',
    },
    player: {
      flex: 1,
      margin: 24 * hp,
      marginBottom: 59 * hp,
      borderRadius: 16,
      // backgroundColor: 'black',
    },
  });
  useEffect(() => {
    // getHighMonitorsTree().then(data => {
    //   console.log(data);
    // });
    // getRadiusHighMonitors().then(data => {
    //   console.log(data);
    // });
  }, []);
  const subList = useMemo(() => {
    return Object.keys(SplitScreen).filter(item => typeof +item !== 'number');
  }, []);
  useEffect(() => {
    switch (inactive) {
      case 0:
        break;
      case 1:
        getListUavOnline({patrolCommandId: props.id}).then(data => {
          setPlayList(data ?? []);
        });
        break;
      case 2:
        getListAllVideos().then(data => {
          setPlayList(data ?? []);
        });
        break;
    }
  }, [inactive]);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        margin: 24 * hp,
        borderRadius: 16,
        flexDirection: 'row',
      }}>
      <View
        style={{
          width: 144 * hp,
          borderRightColor: 'rgba(0,0,0,0.08)',
          borderRightWidth: 1,
          alignItems: 'center',
        }}>
        {List.map((item, index) => (
          <TouchableOpacity
            key={item.title}
            onPress={() => {
              setInactive(index);
            }}>
            <Text
              style={[
                styles.active,
                inactive === index ? styles.inactive : undefined,
              ]}>
              {item.title}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View>
        {subList.map(item => {
          return <Text>{item}</Text>;
        })}
      </View>
      <View
        style={{
          flex: 1,
        }}>
        {/* <VideoPlayer
          styles={styles.player}
          url={playList[0]?.playUrl}></VideoPlayer> */}
      </View>
    </View>
  );
};
